<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  chartName: string
}>()

const data = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' },
]

const demo = () => {
  const myChart = echarts.init(document.getElementById(props.chartName))
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  }
  // 绘制图表
  myChart.setOption(option)
}
onMounted(() => {
  demo()
})

const chartClick1 = (e) => {
  console.log(' 我被执行了 我是百度 Echart', e)
  if (e) {
    data.push({ value: 500, name: 'pang pang' })
    demo()
  }
}
// window['chartClick1'] = chartClick1;
</script>

<template>
  <div class="echart-box" :id="chartName"></div>
  <button @click="chartClick1('1')" class="test-btn">更新E图表</button>
</template>

<style lang="scss" scoped>
.echart-box {
  background: #fff;
  width: 100%;
  height: 300px;
}
.test-btn {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
